<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>寿命计算器</title>
  <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
  <script src="/apps/js/baidu-tongji-mtx.js"></script>
</head>
<body>
  <div class="container">
    <h1>寿命计算器</h1>
    <form action="/" method="post">
      <div class="mb-3">
        <label for="birthday" class="form-label">出生日期</label>
        <input type="date" class="form-control" id="birthday" name="birthday" value="1973-04-08">
      </div>
      <button type="submit" class="btn btn-primary">计算</button>
    </form>
    <div class="mt-5">
      <p>从生日到目前位置已经过了 <span id="daysAlive"></span> 天</p>
      <p>离 2053 年 4 月 7 日还有 <span id="daysLeft"></span> 天</p>
      <p>离 2053 年 4 月 7 日还有 <span id="secondsLeft"></span> 秒</p>
    </div>
  </div>
  <script src="/apps/js/bootstrap.bundle.min.js"></script>
  <script>
const today = new Date();
const birthday = new Date(document.querySelector('#birthday').value);

// 计算出生至今的天数
const daysAlive = (today - birthday).toDays();

// 计算 2053 年 4 月 7 日的天数
const eightyBirthday = new Date(2053, 4, 7);
const daysLeft = (eightyBirthday - today).toDays();

// 计算剩余时间的秒数
const secondsLeft = (eightyBirthday - today) / 1000;

// 创建一个定时器，每秒执行一次
const timer = setInterval(() => {
  // 更新剩余时间的秒数
  secondsLeft--;

  // 更新页面显示
  document.querySelector('#secondsLeft').textContent = secondsLeft;
}, 1000);
  </script>
</body>
</html>

